{% extends "datapanel/base.html" %}
{% block content %}
{% load static %}

    <h5>卖家数据分析</h5>
    <div id="chart-form-1" class=>
        {% comment %} <form action="/v1/chart/seller/" method="post"  enctype="multipart/form-data">
            {% csrf_token %}
            {{ form.as_p }}
            <input type="submit" value="Submit">
        </form> {% endcomment %}
        {% load crispy_forms_tags %}
        {% crispy  form  form.helper %}
    </div>

<div class="row">    
    <div id="graph-1-1" class="col bg-light m-2 p-3" style="width: 600px;height:450px;">.col</div>
</div>
<div class='row  text-black'>
  <div class="col-md-12 mx-auto" id="data-display">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th calss="col-md-3">卖家名称</th>
          <th class="col-md-2">查询类别</th>
          <th class="col-md-2">商品ASIN</th>
          <th class="col-md-2">上月销量</th>
          <th class="col-md-2">评论数</th>
        </tr>
      </thead>
      <tbody>
        {% for item in qs_datalist %}
        <tr>
          <th scope="row"> {{ forloop.counter}} </th>
          <td>{{ item.seller }}</td>
          <td>{{ item.short_name }}</td>
          <td>{{ item.asin }}</td>
          <td>{{ item.bought_last_month }}</td>
          <td>{{ item.reviews }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>  
</div>
{% comment %} <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> {% endcomment %}
<script src="{% static 'datapanel/js/echarts.min.js' %}"></script>

<script>
    var chartDom1_1 = document.getElementById('graph-1-1');
    var myChart1_1 = echarts.init(chartDom1_1);
    var option1_1;
    var seller = new Array();
    var reviews = new Array();
    var datalist= new Array();
    var boughts = new Array();
    mynode = document.getElementById("data-display");
    qs_date = {{ qs_date |safe }};
    data = {{ qs_datalist |safe }};
    for (var i = 0; i < data.length; i++) {
      seller.push(data[i].seller);
      // if seller.length > 10, remain :10
      if (seller.length > 20) {
        seller=seller.slice(0,20);
      }
      reviews.push(data[i].reviews);
      boughts.push(data[i].bought_last_month);
    }
   
    option1_1 = {
      title: {
        text: ' 卖家数据分析',
        left: 'center',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      legend: {
        orient: 'vertical',
        right: 50,
        show: true,
        data: ['上月销量', '评论数'],
      },
      xAxis: {
        type: 'category',
        data: seller,
        axisLabel: { 
          rotate: 30, 
          fontsize:12,
        },
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: "上月销量",
          data: boughts,
          type: 'bar',
          smooth: true
        },
        {
          name: "评论数",
          data: reviews,
          type: 'bar',
          smooth: true
        },
      ]
    };
    
    myChart1_1.setOption(option1_1);


    
</script> 


{% endblock content %}

